<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Regular Expression</title>
<style type="text/css">
body, ul, li {
	margin:0px;
	padding:0px;
}
input {
	border:#cccdcd solid 1px;
}
li {
	list-style:none;
}
.formBox{
	width:550px;
	margin:0 auto;
}
.formBox li{ height:40px;}
.fontRed {
	color:#ff0000;
}
</style>
</head>

<body>
<ul class="formBox">
	<form onsubmit="return checkAll()">
		<li>用户名：&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" id="text0" onblur="check(0)" onfocus="Focus(this)" />
			<label class="fontRed" id="label0"></label>
			<br />
			6~18个字符，包括字母、数字、下划线，以字母开头，字母或数字结尾 </li>
		<li> 邮箱：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" id="text1" onblur="check(1)" onfocus="Focus(this)" />
			<label class="fontRed" id="label1"></label>
			<br />
			请输入您常用的邮箱地址 </li>
		<li> 邮编：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" id="text2" onblur="check(2)" onfocus="Focus(this)" />
			<label class="fontRed" id="label2"></label>
			<br />
			请输入邮编 </li>
		<li> 电话号码：
			<input type="text" id="text3" onblur="check(3)" onfocus="Focus(this)" />
			<label class="fontRed" id="label3"></label>
			<br />
			请输入您的电话号码，如010-1000000或(010)1000000 </li>
		<li> 手机号码：
			<input type="text" id="text4" onblur="check(4)" onfocus="Focus(this)" />
			<label class="fontRed" id="label4"></label>
			<br />
			请输入您的手机号码 </li>
		<li> 年龄：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="text" id="text5" onblur="check(5)" onfocus="Focus(this)" />
			岁
			<label class="fontRed" id="label5"></label>
		</li>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" value="提交" />
	</form>
</ul>
</body>
<script language="javascript">
var flag=new Array();
var sReg=new Array(/^[a-zA-Z][a-zA-Z0-9_]{4,16}[a-zA-Z0-9]$/,/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/,/^[1-9]\d{5}$/,/^(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,/^13\d{9}|14[57]\d{8}|15[01235689]\d{8}|18[0256789]\d{8}$/,/^[1-9]{1}\d?$/);
var sError=new Array("您的用户名不正确，请重试！","您的邮箱地址不正确，请重试！","您输入的邮政有误，请重试！","您输入的电话号码有误，请重试","您输入的手机号码有误，请重试！","请输入真实的年龄！");
function  Focus(obj){
		obj.style.backgroundColor="#29a9e6";
		obj.style.borderColor="#0857b3";
}
function check(i){
	var	oObj=document.getElementById("text"+i);
	if(sReg[i].test(oObj.value)){
		flag[i]=1;
		document.getElementById("label"+i).innerHTML="恭喜，填写正确！";
		oObj.style.backgroundColor="#ffffff";
		oObj.style.borderColor="#cccdcd";
	}
	else{
		flag[i]=-1;
		document.getElementById("label"+i).innerHTML=sError[i];
		oObj.style.backgroundColor="#fae2e2";
		oObj.style.borderColor="#c39391";
	}
}
function checkAll(){
	for(var i=0;i<flag.length;i++){
		if(flag[i]!=1){
			alert(sError[i]);
			return false;	
		}
	}	
	alert("ok!")
	return true;
}
</script>
</html>
